import Vue from "vue";
import $ from "jquery";
import com from "../../utils/common";
import Loading from "../components/loading";
let editHeader = {};
editHeader.Temp = `

<div class="headerModule">
    
    <audio :src="header.BgMusic" autoplay="autoplay" id="bg_music" ></audio>
    <div class="select show_select_music" >
        <section class="change_select">
            <div class="cross"></div>
            <h2>请选择喜欢的背景音乐</h2>
            <div class="select_content music_content">
                <ul>
                    <li v-for="(item,index) in Music" v-on:click="selectMusic(index)">
                        <div class=" weui_cells_checkbox">
                            <label class="weui_cell weui_check_label check_label_box" :for="'music' + index">
                                <input type="radio" class="weui_check" name="checkMusic" :id="'music' + index"
                                       v-model="MusicCheck" v-bind:value="index">
                                <i class="weui_icon_checked"></i>
                                <div class="weui_cell_bd weui_cell_primary">
                                    <p class="fl">&nbsp;{{item.Name}}</p>
                                </div>
                            </label>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="sure_add content_change makesure">我选好了</div>
        </section>
    </div>
    <div class="select show_select_title" >
        <!-- 选择标题时 -->
        <section class="change_select">
            <div class="cross"></div>
            <h2>请选择喜欢的标题</h2>
            <div class="select_content title_content">
                <ul>
                    <li v-for="(item,index) in FineTitle" v-on:click="selectTitle(index)">
                        <div class=" weui_cells_checkbox">
                            <label class="weui_cell weui_check_label check_label_box" :for="'title' + index">
                                <input type="radio" name='checkTitle' class="weui_check" :id="'title' + index"
                                       v-model="TitleCheck" v-bind:value="index">
                                <i class="weui_icon_checked"></i>
                                <div class="weui_cell_bd weui_cell_primary">
                                    <p class="fl">{{item.Name}}</p>
                                </div>
                            </label>
                        </div>
                    </li>
                </ul>
            </div>
  
            <div class="content_change sure_title makesure">确定使用标题</div>
        </section>
    </div>
    <!-- 更换头图时处理 -->
    <div class="top_img_banner gdailog" >
        <p class="selectIndustry">
                    <span v-for="(item,index) in FineBanner"
                          :class="{ 'active': index == BannerNavIndex}"
                          v-on:click="changeBannerIndusty(index)"
                    >{{item.Name}}</span>
        </p>
        <div class="banner-container">
            <ul>
                <li v-for="(item,index) in FineBannerShow" v-on:click="makeSureBannerSelct(item,index)">
                    <div class="top_banner_img">
                        <img :src="item.Src">
                        <i v-if="index == BannerSelect" class="banner-select"></i>
                    </div>
                </li>
            </ul>
        </div>
  
        <div class="up_or_select">
            <div class="sure_top_change makesure">我选好了</div>
            <div class="up_img up_top_img" v-on:click="uploadBanner">上传图片
                <input type="file" id="uploadBanner" @change="uploadBannerImg" style="display:none"/>
            </div>
            <p>自定义图片建议尺寸为640*280像素</p>
        </div>
    </div>
    <header>
        <div class="banner_img">
            <img class="bg_title_banner" :src="header.BannerStr">
        </div>
        <div class="both"></div>
        <div class="activity_slogan">
            <div class="change_title">
                <div v-on:click="changeTitle">
                    <img src="../../../img/activity/change_title_btn.png" alt="">
                    <span>更换标题</span>
                </div>
            </div>
            <div class="both"></div>
            <textarea class="dashed" id="title" name="title" v-model="header.Title"></textarea>
        </div>
        <!-- 更换模块 -->
        <div class="top_banner">
            <div class="select_music fl" v-on:click="changeMusic">
                <img src="../../../img/activity/btn-music-default@2x.png" alt="">
            </div>
            <div class="select_banner fl" v-on:click="changeBannerImg">
                <img src="../../../img/activity/btn-banner-default@2x.png" alt="">
            </div>
        </div>
    </header>
</div>
`;

let HeaderData = {};


let EditHeader = Vue.extend({
  template: editHeader.Temp,
  props: ["header"],
  data: function(){
    return {
      BannerNavIndex: 0, // 头图选择
      BannerSelect: 0, // 当前选中头图
      MusicCheck: "0", // 当前选中的音乐
      TitleCheck: "0", // 选中的标题
      FineTitle: [],
      FineBanner: [],
      FineBannerShow: [],
      Music: [],
    }
  },
  mounted(){
    let self = this;
    com.ajax({
      url: "/normal/getAllBannerImgs",
      ok: function (data) {
        self.FineBanner = JSON.parse(data["res"]);
      }
    })
      .ajax({
        url: "/normal/getAllMusic",
        ok: function (data) {
          self.Music = JSON.parse(data["res"]);
        }
      })
      .ajax({
        url: "/normal/getDefualtTile",
        ok: function (data) {
          self.FineTitle = JSON.parse(data["res"]);
        }
      });
  },
  methods: {
    //上传头图
    uploadBanner: function () {
      $("#uploadBanner").trigger('click');
    },
    uploadBannerImg: function () {
      let self = this;
      let inputDom = $("#uploadBanner");
      let formData = new FormData();
      console.log(inputDom[0].files)
      for (var i = 0; i < inputDom[0].files.length; i++) {
        formData.append("files", inputDom[0].files[i]);
      }
      Loading.mask();
      com.UploadFile(formData, function (data) {
        let imgData = data.body;
        for (let i in imgData) {
          // self.val.Section[index]["Desc"].push({ Img: imgData[i] });
          self.header.BannerStr = imgData[i];
        }
        //
        self.BannerNavIndex = -1;
        self.BannerSelect = -1;
        Loading.unmask();
      });
    },
    selectMusic: function (index) {
      this.header.BgMusic = this.Music[index].Src;
      this.MusicCheck = index.toString();
    },
    selectTitle: function (index) {
      this.header.Title = this.FineTitle[index].Name;
      // console.log(typeof index);
      this.TitleCheck = index.toString();
    },

    //更换音乐
    changeMusic: function () {
      $(".mask").show();
      $(".top_img_banner").hide();
      $(".show_select_music").show();
    },
    //更换title
    changeTitle: function () {
      $(".show_select_title").show();
      $(".mask").show();
    },
    //更换banner图像
    changeBannerImg: function () {
      $(".top_img_banner").show();
      this.FineBannerShow = this.FineBanner[0]["Images"];
      $(".management").hide();
    },
    //切换banner行业
    changeBannerIndusty: function (index) {
      this.FineBannerShow = this.FineBanner[index]["Images"];
      this.BannerNavIndex = index;
      this.makeSureBannerSelct(this.FineBannerShow[0], 0);
    },
    //确认bannerimage
    makeSureBannerSelct: function (item, index) {
      this.header.BannerStr = item["BannerImg"];
      this.BannerSelect = index;
      console.log(this);
    },
  }
});
export default EditHeader;
